<template>
  <div>
    <div class="link " :class="{ mobile: isMobile }">
      <h2><i class="fa fa-link" aria-hidden="tdue"></i>&nbsp;友情链接</h2>
      <div class="links">
        <div class="linker one">
          <img src="../../../assets/img/link (1).png" alt="" />
          <div class="linker-user">
            <span class="username">闪烁之狐</span>
            <div class="hr"></div>
            <span class="userinfor">编程大佬，matery主题作者</span>
          </div>
          <div class="linker-link">
            <a href="#">前去学习</a>
          </div>
        </div>
        <div class="linker two">
          <img src="../../../assets/img/link (1).png" alt="" />
          <div class="linker-user">
            <span class="username">YangAir</span>
            <div class="hr"></div>
            <span class="userinfor">Web Front And Engineer</span>
          </div>
          <div class="linker-link">
            <a href="#">前去学习</a>
          </div>
        </div>
        <div class="linker three">
          <img src="../../../assets/img/link (1).png" alt="" />
          <div class="linker-user">
            <span class="username">IFONLY</span>
            <div class="hr"></div>
            <span class="userinfor">努力学习安全技术的小白</span>
          </div>
          <div class="linker-link">
            <a href="#">前去学习</a>
          </div>
        </div>
        <div class="linker four">
          <img src="../../../assets/img/link (2).png" alt="" />
          <div class="linker-user">
            <span class="username">Edgar</span>
            <div class="hr"></div>
            <span class="userinfor">抛弃物联网投向计算机怀抱</span>
          </div>
          <div class="linker-link">
            <a href="#">围观一下</a>
          </div>
        </div>
        <div class="linker five">
          <img src="../../../assets/img/link (3).png" alt="" />
          <div class="linker-user">
            <span class="username">伊艾拉</span>
            <div class="hr"></div>
            <span class="userinfor">寻找知识的乐趣</span>
          </div>
          <div class="linker-link">
            <a href="#">骚扰一下</a>
          </div>
        </div>
      </div>
      <ul>
        <li v-for="link in linkList" :key="link.link_id">
          <a :href="link.url">{{ link.link_name }}</a>
        </li>
      </ul>
    </div>
    <div class="tips " :class="{ mobile: isMobile }">
      <h3>互换友链请先添加本站友链，再到下面留言，格式如下：</h3>
      <div class="code">
        <table>
          <tr>
            <td class="p-zero">1</td>
            <td class="p-zero">{</td>
          </tr>
          <tr>
            <td class="p-zero">2</td>
            <td>
              <span class="p-one">"avatar"</span><span class="p-two">: </span
              ><span class="p-three"
                >"https://jaav.com.cn/medias/logo.png",</span
              >
            </td>
          </tr>
          <tr>
            <td class="p-zero">3</td>
            <td>
              <span class="p-one">"name"</span><span class="p-two">: </span
              ><span class="p-three">"cherry",</span>
            </td>
          </tr>
          <tr>
            <td class="p-zero">4</td>
            <td>
              <span class="p-one">"intdoduction"</span
              ><span class="p-two">: </span
              ><span class="p-three">"犹豫就会败北",</span>
            </td>
          </tr>
          <tr>
            <td class="p-zero">5</td>
            <td>
              <span class="p-one">"url"</span><span class="p-two">: </span
              ><span class="p-three">"https://jaav.com.cn",</span>
            </td>
          </tr>
          <tr>
            <td class="p-zero">6</td>
            <td>
              <span class="p-one">"title"</span><span class="p-two">: </span
              ><span class="p-three">"骚扰一下"</span>
            </td>
          </tr>
          <tr>
            <td class="p-zero">7</td>
            <td class="p-zero">}</td>
          </tr>
        </table>

        <Form
          ref="addForm"
          :model="addForm"
          :rules="ruleValidate"
          :label-width="80"
        >
          <FormItem label="Name" prop="name">
            <Input v-model="addForm.name" placeholder="Enter your name"></Input>
          </FormItem>
          <FormItem label="Url：" prop="url">
            <Input v-model="addForm.url" placeholder="Enter your url"></Input>
          </FormItem>
          <FormItem>
            <Button type="primary" @click="handleSubmit('addForm')"
              >Submit</Button
            >
            <Button @click="handleReset('addForm')" style="margin-left: 8px"
              >Reset</Button
            >
          </FormItem>
        </Form>
      </div>
    </div>
    <div></div>
  </div>
</template>

<script>
import { mapActions, mapGetters } from "vuex";
export default {
  name: "index",
  data() {
    return {
      addForm: {
        name: "",
        url: ""
      },
      ruleValidate: {
        name: [
          {
            required: true,
            message: "The name cannot be empty",
            trigger: "blur"
          }
        ],
        url: [
          { required: true, message: "Url cannot be empty", trigger: "blur" },
          { type: "url", message: "Incorrect url format", trigger: "blur" }
        ]
      },
      linkList: []
    };
  },
  computed: {
    ...mapGetters(["isMobile"])
  },
  created() {
    this.getLink();
  },
  methods: {
    ...mapActions(["fetchBlogLink", "saveBlogLink"]),
    async getLink() {
      const res = await this.fetchBlogLink();

      if (res.code === 2000) {
        this.linkList = res.data.content;
      }
    },
    handleSubmit(name) {
      this.$refs[name].validate(async valid => {
        if (!valid) {
          this.$Message.error("Fail!");
        } else {
          const formData = Object.assign({}, this.addForm);
          this.$refs.addForm.resetFields();
          this.addForm = {
            name: "",
            url: ""
          };
          const res = await this.saveBlogLink(formData);
          if (res.code === 2001) {
            this.$Message.success("添加成功");
            await this.getLink();
          } else {
            this.$Message.error("添加失败 message:" + res.message);
          }
        }
      });
    },
    handleReset(name) {
      this.$refs[name].resetFields();
    }
  }
};
</script>

<style lang="less" scoped>
.link {
  width: 60%;
  background: white;
  margin: 0 auto;
  transform: translateY(-100px);
  transition: all 0.35s ease-in-out;
  border-radius: 12px;
  text-align: center;
  padding: 25px;
  h2 {
    margin-top: 10px;
    color: #030210;
  }
  .links {
    margin-top: 40px;
  }
}
.mobile.link {
  width: 83%;
  background: white;
  margin: 0 auto;
  transform: translateY(-100px);
  transition: all 0.35s ease-in-out;
  border-radius: 12px;
  text-align: center;
  padding: 25px;
  .links {
    margin-top: 40px;
  }
  h2 {
    font-size: 23px;
    color: #3c4858;
  }
  .linker {
    width: 85%;
    border-radius: 7px;
    position: relative;
    text-align: left;
    height: 130px;
    padding: 20px;
    margin: 30px auto;
    display: inline-block;
  }
}
.linker {
  width: 27%;
  border-radius: 7px;
  position: relative;
  text-align: left;
  height: 130px;
  padding: 20px;
  margin: 30px 10px;
  display: inline-block;
  &.one {
    background: linear-gradient(to right, #4eadfe 0%, #02f0fd 100%);
  }
  &.two {
    background: linear-gradient(to right, #677be6 0%, #7159b5 100%);
  }
  &.three {
    background: linear-gradient(to right, #b565d9 0%, #ee609c 100%);
  }
  &.four {
    background: linear-gradient(to right, #6814cc 0%, #2673fb 100%);
  }
  &.five {
    background: linear-gradient(to right, #e371dd 0%, #e471dd 100%);
  }
  img {
    width: 30%;
    border-radius: 50%;
    position: absolute;
    top: 16%;
  }
  .linker-user {
    right: 15px;
    width: 55%;
    position: absolute;
    top: 23%;
    .username {
      font-size: 30px;
      font-weight: bold;
      color: white;
    }
  }
}

.hr {
  border-bottom: 2px solid white;
  margin-top: 3px;
}
.userinfor {
  font-size: 14px;
  color: white;
}
.linker-link {
  background-color: #ff4351;
  position: absolute;
  left: 30%;
  bottom: -20px;
  height: 25%;
  width: 40%;
  border-radius: 400px;
  text-align: center;
  a {
    line-height: 37px;
    font-size: 16px;
  }
}
.tips {
  width: 60%;
  background: white;
  margin: -40px auto 0 auto;
  transition: all 0.35s ease-in-out;
  border-radius: 12px;
  padding: 25px;
  h3 {
    color: #354a5f;
  }
}
.mobile.tips {
  width: 86%;
  padding: 20px;
  h3 {
    font-size: 24px;
  }
  table {
    font-size: 14px;
  }
  .code {
    padding: 10px;
  }
}
.code {
  background-color: #fcfaf5;
  padding: 20px;
  border-radius: 10px;
  table {
    width: 90%;
    font-size: 16px;
    letter-spacing: 1px;
  }
}
.p-zero {
  color: #999999;
  width: 20px;
}
.p-one {
  color: #905;
  padding-left: 40px;
}
.p-two {
  color: #9a6e3a;
}
.p-three {
  color: #690;
}
@keyframes miss {
  0% {
    opacity: 1;
    top: 0; /*初始状态 透明度为10%*/
  }
  50% {
    opacity: 0.5; /*中间状态 透明度为50%*/
  }
  100% {
    opacity: 0.1;
    top: 200px; /*结尾状态 不透明*/
  }
}
@keyframes show {
  0% {
    opacity: 0.1;
    top: 200px; /*初始状态 透明度为10%*/
  }
  50% {
    opacity: 0.5; /*中间状态 透明度为50%*/
  }
  100% {
    opacity: 1;
    top: 0; /*结尾状态 不透明*/
  }
}
</style>
